<template>
    <div>
        <div class="head">
            <span @click.stop="goBack" class="iconfont icon-arrow-left-bold"></span>
        </div>
        <div class="main">
            <div class="title">登录</div>
            <div class="number">
                <div class="text">手机号</div>
                <div class="input">
                    <input type="number" v-model="loginForm.mobile" placeholder="请输入手机号" />
                    <span @click.stop="clearMobile" v-show="loginForm.mobile" class="iconfont icon-close"></span>
                </div>
            </div>
            <div class="number">
                <div class="text">密码</div>
                <div class="input">
                    <input type="password" v-model="loginForm.password" placeholder="请输入密码" />
                    <span @click.stop="clearPassword" v-show="loginForm.password" class="iconfont icon-close"></span>
                </div>
            </div>
        </div>
        <div class="button">
            <div v-if="loginForm.mobile && loginForm.password" class="active" @click.stop="getLogin">登录</div>
            <div v-else>登录</div>
        </div>
    </div>
</template>

<script>
import Vue from "vue";
import { Toast } from "vant";
Vue.use(Toast);
export default {
    data() {
        return {
            url: this.$route.query.url || "",
            loginForm: {
                mobile: "",
                password: "",
            },
        };
    },
    methods: {
        goBack() {
            this.$router.go(-1);
        },
        clearMobile() {
            this.loginForm.mobile = "";
        },
        clearPassword() {
            this.loginForm.password = "";
        },
        getLogin() {
            if (!this.loginForm.password) {
                return;
            }
            if (!/^[1][3,4,5,6,7,8,9][0-9]{9}$/.test(this.loginForm.mobile)) {
                Toast.fail("请输入正确的手机号");
                return;
            }
            this.$request
                .post("/api/v2/login/password", {
                    mobile: this.loginForm.mobile,
                    password: this.loginForm.password,
                })
                .then((res) => {
                    if (res.code === 0) {
                        localStorage.setItem("h5-token", res.data.token);
                        if (this.url) {
                            window.location.href = this.url;
                        } else {
                            this.$router.go(-1);
                        }
                    }
                })
                .catch((err) => {
                    Toast.fail("登录失败");
                });
        },
    },
};
</script>

<style lang="less" scoped>
.head {
    width: 100%;
    height: 50px;
    padding-left: 15px;
    padding-right: 15px;
    display: flex;
    align-items: center;
    span {
        font-size: 19px;
    }
}

.main {
    width: 100%;
    background-color: #fff;
    padding: 30px 30px 0 30px;
    .title {
        width: 100%;
        height: 24px;
        font-size: 24px;
        font-weight: 500;
        color: #171923;
        line-height: 24px;
        margin-bottom: 30px;
    }
    .number {
        width: 100%;
        padding: 6px 0;
        display: flex;
        border-bottom: 1px solid #f4faff;
        margin-bottom: 50px;
        .text {
            min-width: 48px;
            font-size: 16px;
            font-weight: 400;
            color: #333;
            line-height: 36px;
            margin-right: 25px;
        }
        .input {
            flex: 1;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            box-sizing: border-box;
            align-items: center;
            input {
                max-width: 200px;
                height: 36px;
                outline: none;
                color: #333;
                font-size: 16px;
                border: none;
            }
            span {
                font-size: 18px;
            }
        }
    }
}

.button {
    margin: 15px 30px 0 30px;
    div {
        width: 100%;
        height: 48px;
        background-color: rgba(60, 167, 250, 0.6);
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
        font-weight: 500;
        color: #fff;
        cursor: pointer;
        &.active {
            background-color: #3ca7fa;
        }
    }
}
</style>
